<template>
	<view class="preview-container">
		<!-- 关闭按钮 -->
		<view class="close-btn" @click="handleClose">×</view>
		<swiper @click="handleClose" :current="currentIndex" @change="onSwiperChange" class="preview-swiper">
			<swiper-item v-for="(item, index) in imageList" :key="index">
				<image :src="item" mode="aspectFit" class="preview-image" />
			</swiper-item>
		</swiper>

		<!-- 自定义指示器 -->
		<view class="custom-indicator">
			<text class="arrow left" @click="prevImage">◀</text>
			<text class="index">{{ currentIndex + 1 }}/{{ imageList.length }}</text>
			<text class="arrow right" @click="nextImage">▶</text>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			imageList: Array,
			initialIndex: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				currentIndex: this.initialIndex
			};
		},
		methods: {
			handleClose() {
				// 触发 close 事件，通知父组件关闭预览
				this.$emit('close');
			},
			onSwiperChange(e) {
				this.currentIndex = e.detail.current;
			},
			prevImage() {
				if (this.currentIndex > 0) this.currentIndex--;
			},
			nextImage() {
				if (this.currentIndex < this.imageList.length - 1) this.currentIndex++;
			}
		}
	};
</script>

<style scoped="scss">
	.preview-container {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		z-index: 999;

		.close-btn {
			cursor: pointer;
			position: absolute;
			top: 20px;
			right: 20px;
			font-size: 40px;
			color: white;
			z-index: 1000;
			padding: 10px;
		}

		.preview-swiper {
			height: 100%;
		}

		.preview-image {
			width: 100%;
			height: 100%;
		}

		.custom-indicator {
			position: absolute;
			bottom: 40px;
			left: 50%;
			transform: translateX(-50%);
			display: flex;
			align-items: center;
			background: rgba(0, 0, 0, 0.5);
			padding: 8px 16px;
			border-radius: 20px;
			color: white;
		}

		.arrow {
			font-size: 24px;
			margin: 0 10px;
			cursor: pointer;
		}

		.index {
			margin: 0 10px;
		}
	}
</style>